<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="/style/default/index.css">
  <style>
    body{
      text-align:center;
      background:url("/images/bg.jpeg") no-repeat;
      background-size: 100%;
    }
    .divcss5{margin:0 auto}
  </style>
</head>

<body>
<div id="app" >
  <div style="text-align: left;font-size: 20px;color: #ccc;margin:20px 0px 0px 20px;">广东顺丰科技发展优先公司</div>
  <div style="width: 400px;text-align:left;" class="divcss5" >
    <el-card class="box-card" :style="{marginTop:tagHeight + 'px'}">
      <div slot="header" class="clearfix">
        <span>用户登录</span>
      </div>
      <div>
        <el-form v-loading="loadLoading" ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="loginForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="loginForm.password" show-password @keyup.enter.native="submitLogin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitLogin">登 录</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/validate.js"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        tagHeight: window.innerHeight / 5, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
        loadLoading: false, // 显示登录等待中
        loginForm: {
          phone: '',
          password: ''
        },
        // 表单中的数据验证规则
        rules: {
          phone: [
            {required: true, trigger: 'blur', validator: validPhone} // 判断手机号码格式是否正确（必填）
          ],
          password: [
            {required: true, trigger: 'blur', message: '密码不能为空'}
          ]
        },
      }
    },
    mounted() {
      // 当窗口大小发生改变的时候系统自动调用
      window.onresize = () => {
        this.pageResize();
      }
    },
    methods: {
      // 改变表格高度
      pageResize() {
        this.tagHeight = window.innerHeight / 5;
      },

      // 用户登录
      submitLogin() {
        this.loadLoading = true;
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            axios.post('/guest/member/login.bu', this.loginForm)
              .then(function (response) {
                if (response.data.code > 0) {
                  window.location.href = "home.html";
                  vm.loadLoading = false;
                } else if(response.data.code == 0){
                  vm.$message.error(response.data.msg);
                  vm.loadLoading = false;
                } else {
                  vm.$message.error(response.data.msg);
                  vm.loadLoading = false;
                }
              })
              .catch(function (error) {
                vm.$message.error('出错：' + error);
              });
          } else {
            vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
            return false;
          }
        });
      }
    },
  });


</script>

</html>